<template>
	<div id="single_list_vue" class="content" style="background: rgb(245, 247, 250); padding-top: 20px;">
		<div class="t_a1">
			<div class="course-a"><span>首页 &gt; </span> <span>口语题库</span></div>
			<div id="middle_content">
				<div id="middle_left2" style="width: 910px; margin-top: -14px;">
					<div>
						<div id="banner_oral" style="">
							<div style="display: flex; justify-content: right;">
								<img :src="state.examTopBanner"
									style="width:100%;border-radius: 0px 5px 5px; margin: 5px 0px 8px; cursor: pointer;">
							</div>
						</div>
						<div id="loader"
							style="width: 60px; margin: 0px auto; height: 400px; display: none; justify-content: center; align-items: center;">
							<img src="../assets/loading.gif"
								style="width: 100px; margin: 0px auto; top: -200px; flex-shrink: 0;">
						</div>
						<div class="topic-list1 flex-item" style="box-shadow: 0px 0px 0px;">
							<div class="topic-list flex-item" style="padding: 10px 0px;">
								<div class="qt_a flex">
									<div class="qt_btn qt_m_j cursor_none" style="width: 60px; text-align: left;">模块
									</div>
									<div class="qt_btn_screen" style="flex: 1 1 0%;">
										<div class="qt_btn" @click="PartChange(index)"
											:class="{'qt_btn_active':index == state.PartIndex}"
											v-for="(item,index) in state.Part" :key="index">Part{{item}}
										</div>
									</div>
								</div>
								<div class="qt_a flex">
									<div class="qt_btn qt_m_j cursor_none" style="width: 60px; text-align: left;">新旧
									</div>
									<div class="qt_btn_screen" style="flex: 1 1 0%;">
										<div @click="dictChange(index)"
											:class="{'qt_btn_active':index == state.dictListIndex}" class="qt_btn"
											v-for="(item,index) in state.dictList" :key="index">
											{{item.text}}
										</div>
									</div>
								</div>
								<div class="qt_a flex">
									<div class="qt_btn qt_m_j cursor_none" style="width: 60px; text-align: left;">主题
									</div>
									<div class="qt_btn_screen" style="flex: 1 1 0%; display: flex;">
										<div @click="themChange(index)" class="qt_btn"
											:class="{'qt_btn_active':index == state.themIndex}"
											v-for="(item,index) in state.themList" :key="index">{{item.name}}
										</div>
										<div style="display: inline-block;">
											<div class="search" style="margin-top: -12px; margin-left: 105px;"><img
													src="../assets/search.png" alt="" style="width: 30px; padding: 2%;">
												<input type="text" placeholder="请输入话题" autocomplete="new-password">
												<input type="submit" value="搜索" class="searchButton"
													autocomplete="new-password">
											</div>
										</div>
									</div>
								</div>
								<div class="qt_a flex">
									<div style="width: 100%; display: flex; flex-wrap: wrap;">
										<template v-if="state.list.length">
											<template v-for="(item,index) in state.list" :key="index">
												<div class="topicin"
													v-if="(item.module == state.PartIndex+1) && (item.tags.indexOf(state.dictList[state.dictListIndex].value) != -1) && (state.themIndex == item.theme || state.themIndex == 0)">
													<div @click="toSpeackPractice(item.title)"
														style="display: flex; align-items: center;">
														<span style="margin-top: 6px;">
															<span class="speakType">
																<label>
																	<input @click.stop="" id="checkbox_oral_id_684"
																		name="statusList" type="checkbox"
																		class="checkBox" value="684" style="zoom: 75%;">
																</label>
															</span>
														</span>
														<span class="el-tooltip item toolSpeack"
															aria-describedby="el-tooltip-5522" tabindex="0"
															style="cursor: pointer;">
															<span id="oM_684" oralmid="684" class="s1"
																style="color: rgb(45, 44, 44); text-decoration: none;">
																{{item.title}}
															</span>
														</span>
														<div class="topic" v-if="item.tagarr.includes('2')"><img
																src="../assets/new.png"
																style="width: 40px; top: -200px; flex-shrink: 0; margin-left: -40px; margin-top: -10px;">
														</div>
													</div>
												</div>
											</template>
										</template>
									</div>
								</div>
							</div>
						</div>
						<div style="color: rgb(153, 153, 153); width: 880px; margin: 0px auto;"><br></div>
					</div>
				</div>
				<div id="middle_right" class="oral_sSubjects" style="margin-top: -31px;">
					<AsidePart></AsidePart>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import AsidePart from "./asidePart.vue"
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	import {
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	const state = reactive({
		list: [],
		themList: [{
			name: '全部',
			id: 0
		}, {
			name: '人物',
			id: 1
		}, {
			name: '地点',
			id: 2
		}, {
			name: '经历',
			id: 3
		}, {
			name: '事物',
			id: 4
		}],
		themIndex: 0,
		Part: [1, 2, 3],
		PartIndex: 0,
		dictList: [],
		dictListIndex: 0,
		examTopBanner: ''
	})

	const toSpeackPractice = (title) => {
		const query = {
			name: title,
			partIndex: state.PartIndex
		}
		router.push({
			path: '/home/SpeackPractice',
			query
		})
	}

	const themChange = (index) => {
		state.themIndex = index
	}

	const PartChange = (index) => {
		state.PartIndex = index
	}

	const dictChange = (index) => {
		state.dictListIndex = index
	}

	const getDictItems = () => {
		proxy.$http.get('/boot/api/comm/dict/getDictItems/PaperTag').then(res => {
			if (res.data.success) {
				state.dictList = res.data.result[0].dictList
			}
		})
	}

	function getList() {
		proxy.$http.get('/boot/api/questions/paper/listSpokenExam').then(res => {
			if (res.data.success) {
				state.list = res.data.result
				state.list.forEach(function(item) {
					item.tagarr = item.tags.split(',')
				})
			}
		})
	}
	onMounted(() => {
		getList()
		getDictItems()
		let posterData = JSON.parse(localStorage.getItem('posterData'))
		state.examTopBanner = 'http://ielts.tuyaedu.com/boot/sys/common/static/' + posterData[10].photoPath
	})
</script>
<style scoped lang="scss">
	[v-cloak] {
		display: none;
	}

	/*修改滚动条样式*/
	div::-webkit-scrollbar {
		width: 10px;
		height: 10px;
		/**/
	}

	div::-webkit-scrollbar-thumb {
		background: #bfbfbf;
		border-radius: 10px;
	}

	div::-webkit-scrollbar-thumb:hover {
		background: #333;
	}

	.searchButton {
		width: 80px;
		height: 100%;
		background-color: #ff4b40;
		color: white;
		border-radius: 0px 10px 10px 0;
	}

	.search {
		border: 1px solid #f5f7fa;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
	}

	div.search input:nth-child(2) {
		border: none !important;
		outline: none !important;
	}

	input[type="checkbox"]:not(.switch):after {
		width: 5.5px !important;
		left: 5.5px !important;
		outline: none !important;
	}

	input[type="checkbox"],
	input[type="radio"] {
		--active-inner: #aaaaaa !important;
		outline: none !important;
	}

	input[type="checkbox"]:checked,
	input[type="radio"]:checked {
		background: #e4ecfa00 !important;
		border-color: #9999 !important;
		outline: none !important;
	}

	input[type="checkbox"],
	input[type="radio"] {
		--input-border: #9999 !important;
		outline: none !important;
	}

	input[type="checkbox"]:not(.switch) {
		border-radius: 3px !important;
		outline: none !important;
	}

	div.search input:nth-child(3) {
		border: none !important;
	}

	.titlefont {
		display: flex;
		font-size: 3px;
		width: 50px;
		color: #999999;
	}

	.s1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100px;
		padding-left: 3%;
		color: black;
		display: inline-block;
		width: 180px;
	}

	.s2 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 80px;
		padding-left: 3%;
		color: #999999 !important;
		display: inline-block;
	}

	.top {
		text-align: center;
	}

	.left {
		float: left;
		width: 60px;
	}

	.right {
		float: right;
		width: 60px;
	}

	.bottom {
		clear: both;
		text-align: center;
	}

	.item {
		margin: 4px;
	}

	.left .el-tooltip__popper,
	.right .el-tooltip__popper {
		padding: 8px 10px;
	}

	.topicin {
		display: flex;
		width: 215px;
		display: flex;
		/* justify-content: center; */
		align-items: center;
		border: 1px solid #f5f7fa;
		padding: 1%;
		margin: 0px -1px -1px 0px;
		justify-content: space-between;
	}

	.topic-list1 {
		background: #ffffff;
		box-shadow: 0 2px 20px 0 #f2f2f2;
		border-radius: 0 6px 6px 6px;
		padding-top: 20px;
		padding-bottom: 30px;
	}

	.topic-list {
		background: #ffffff;
		border-radius: 0 6px 6px 6px;
		padding-top: 20px;
		padding-bottom: 30px;
	}

	.oral_title {
		color: #2d2c2c;
	}

	.topic-list .qt_btn {
		font-size: 15px;
		color: #2d2c2c;
	}

	.qt_btn_active {
		color: #ffffff !important;
	}

	.sg_or {
		box-shadow: 0 2px 4px 0 rgb(47 55 68 / 10%);
		border-radius: 6px 0 0 6px;
		font-size: 14px;
		color: #333333;
		width: 34px;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 15px;
		cursor: pointer;
		margin-bottom: 2px;
		position: absolute;
		margin-left: -33px;
		background-color: white;
	}

	.single-type-a div {
		background: #f5f7fa;
	}

	.single-type-active div {
		background: #ff4b40;
		border-radius: 4px;
		width: 30px;
		height: 4px;
		margin: 1rem auto 0 auto;
	}

	.qt_btn1 {
		text-align: center;
		border: 1px solid #e6ecf2;
		width: 80px;
		height: 34px;
		line-height: 30px;
		margin-right: 0px;
		padding: 0px 0px;
		background-color: #ffffff;
		color: #24272b;
		font-size: 14px;
		display: inline-block;
		cursor: pointer;
		min-width: 60px;
		text-align: center;
		margin: 0px -1px -1px 0px;
	}

	.qt_btn_active1 {
		border-radius: 0px;
		background-color: #ffefee;
		color: #ff4b40;
	}

	.start {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.single-content-in {
		width: 100%;
		background: #383838;
		box-shadow: 0 0 8px 0 #e7eaf0;
		border-radius: 18px;
		height: 120px;
		display: flex;
	}

	.single-content-all {
		height: 280px;
	}

	.single-content-title {
		font-family: SourceHanSansCN-Heavy;
		font-size: 22px;
		color: #ffffff;
		padding: 20px 0px 0px 10px;
		font-weight: 600;
	}

	.single-content-title1 {
		width: 80px;
		font-family: SourceHanSansCN-Medium;
		font-size: 13px;
		color: #766ea5;
		text-align: center;
		height: 66px;
		padding: 0px 0px 0px 10px;
	}

	.single-content-title12 {
		color: #567faf !important;
	}

	.single-content-title2 {
		font-family: SourceHanSansCN-Heavy;
		font-size: 40px;
		color: #766ea5;
		text-align: center;
		height: 66px;
		line-height: 30px;
		font-weight: 600;
	}

	.single-content-card {
		width: 178px;
		height: 240px;
		background: #ffffff;
		box-shadow: 0 4px 20px 0 rgb(0 0 0 / 5%);
		border-radius: 8px;
		border-radius: 8px;
		margin: 20px 5px;
	}

	.single-content-card-top-in {
		display: flex;
		/* justify-content: space-around; */
		width: 150px;
		justify-content: space-between;
	}

	/*div{*/
	/*border: 1px solid black;*/
	/*}*/
	#middle_content {
		margin-left: 15px;
		margin-left: -5px;
	}

	.single-content-card-top {
		width: 178px;
		height: 35px;
		background: #766ea5;
		border-radius: 8px 8px 0 0;
		border-radius: 8px 8px 0px 0px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: white;
	}

	.single-content-card-top2 {
		background: #759ecd !important;
	}

	.single-content-card-bottom {
		height: 205px;
		/*width: 165px;*/
	}

	.single-content-card-bottom-in {
		display: flex;
		align-items: center;
		width: 95%;
		margin: 0 auto;
		padding: 5px;
		border-width: 0 0 1px 0;
		border-style: solid;
		border-color: #edf2f7;
		padding: 3%;
		margin-top: 3px;
		min-height: 45px;
	}

	.single-content-card-bottom-in1 {
		display: flex;
		width: 95%;
		margin: 0 auto;
		padding: 5px;
	}

	.single-content-card-bottom-in-left {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.single-content-card-bottom-in-right {
		width: 90%;
	}

	.single-content-card-bottom-in-right2 {
		font-family: SourceHanSansCN-Regular;
		font-family: -apple-system;
		font-size: 10px;
		color: #999999;
		padding-left: 10px;
	}

	.single-content-attach {
		color: red;
	}

	.single-content-card-bottom-in-right1 {
		cursor: pointer;
		padding-left: 10px;
		width: 149px;
		font-size: 10px;
		display: block;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		-icab-text-overflow: ellipsis;
		-khtml-text-overflow: ellipsis;
		-moz-text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
	}

	.single-content {
		overflow: initial;
	}

	.single-content-card-bottom-title {}

	/*div{*/
	/*border:1px solid black;*/
	/*}*/

	.close_banner {
		font-size: 0.45rem;
		border-radius: 21px;
		color: rgb(70, 68, 68);
		float: right;
		border: 1px solid rgb(123, 118, 118);
		margin-bottom: -15px;
		margin-right: -15px;
		width: 31px;
		position: relative;
		background-color: #fbf6f6;
		padding-top: 5px;
	}

	.textNormal {
		margin-left: 335px;
		display: inline-block;
		font-size: 14px;
	}

	.textNormal>a {
		background-color: #ffefee;
		color: #ff4b40;
		padding: 8px 10px;
		text-decoration: none;
		border-radius: 5px;
	}

	.anna-code {
		text-align: center;
		position: absolute;
		/*width: 200px;*/
		/* background-color: white;
             box-shadow: 0 4px 20px 0 rgb(0 0 0 / 5%);*/
		z-index: 999;
		/*border: 1px solid #CCCCCC;*/
		border-radius: 10px;
		margin-top: 30px;
		padding: 8px 8px;
		margin-left: -130px;
	}

	.anna-code>img {
		/*  width: 180px;*/
		width: 100%;
		border-radius: 10px;
	}

	.anna-code>p {
		font-size: 13px;
	}

	.mockTest {
		background: #5a5288;
		border-radius: 20px;
		padding: 2px 5px;
		cursor: pointer;
		caret-color: transparent;
	}

	.mockTest2 {
		background: #567faf;
		border-radius: 20px;
		padding: 2px 5px;
		cursor: pointer;
		caret-color: transparent;
	}

	input:focus {
		outline: none;
	}

	.close_a {
		position: absolute;
		bottom: 46px;
		left: 43%;
		font-size: 20px;
		color: #7c7878;
		text-decoration: underline;
		text-underline-offset: 5px;
	}

	.close-btn {
		color: white !important;
		width: 100px;
		position: absolute;
		top: -66px;
		left: 664px;
		font-size: 50px !important;
		background-color: transparent !important;
		border: 0 !important;
		outline: none;
	}

	.close-btn2 {
		display: inline-block;
		padding: 0px 3px;
		color: white;
		position: absolute;
		font-size: 38px;
		background-color: transparent !important;
		border: 0 !important;
	}

	.oralMockTable {
		width: 88%;
		max-width: 100%;
		font-size: 14px;
		margin: auto;
		margin-top: 18px;
	}

	.oralMockTable th {
		background-color: #e3e7eb;
	}

	.oralMockTable th,
	.oralMockTable td {
		border: 1px solid #bdbbbb;
		padding: 8px;
		line-height: 1.42857143;
		vertical-align: top;
		text-align: center;
	}

	.oral_mock_btn {
		background-image: linear-gradient(90deg, #ff8d80 0%, #ff574d 100%);
		border: 0;
		color: white;
		padding: 0px 11px;
		border-radius: 6px;
		cursor: pointer;
	}

	.oral_sSubjects #navigationBar {
		margin-top: 1px !important;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}

	.single-g-text {
		display: flex;
		align-self: center;
		color: white;
		font-weight: bold;
		font-size: 18px;
		margin-left: 25px;
	}

	.banner_css {
		border-radius: 6px;
		margin: 20px 15px 20px 15px;
		cursor: pointer;
		width: 320px;
		height: 320px;
		align-content: center;
	}

	#jqmeter-container,
	#jqmeter-container2 {
		width: 95%;
		height: 13px;
		margin: 0 auto;
	}

	.therm {
		max-width: 100%;
	}

	.therm span {
		color: red !important;
		font-size: 14px !important;
		float: right;
		margin-top: -38px;
		margin-right: 5px;
		padding: 0 !important;
	}

	.inner-therm-title {
		position: absolute;
		margin-left: 10px;
		margin-top: -24px;
	}

	.single-content-card-bottom-in span {
		height: fit-content;
	}
</style>